import React, { useEffect } from 'react'
import useCounter from '../hooks/useCounter'

const Hooks = () => {
    // 页面只要有更新，就要用状态控制
    // 状态: useState
    // 用函数组件实现一个点击加1，点击减1的计数器
    const {count, handleAdd, handleSub} = useCounter();
    // 生命周期: useEffect
    useEffect(()=>{
        // 初始不执行，状态改变执行，怎么解决？
        if(count > 0){
            console.log('count', count);
        }
    }, [count])
    // 初始发送一个请求
    useEffect(()=>{
        // axios.get('http://localhost:3000/api/data')
        //     .then(res=>{
        //         console.log(res);
        //         // setData(res.data);
        //     })
        // 组件卸载时执行
        return ()=>{
            console.log('卸载');
        }
    }, [])  
    return (
        <div>
            <p>{count}</p>
            <button 
                onClick={ handleAdd }
            >加1</button>
            <button onClick={handleSub}>减1</button>
        </div>
    )
}

export default Hooks